<!DOCTYPE html>
<html >

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>公告管理</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="/assets/materialize/css/materialize.min.css" media="screen,projection" />
    <!-- Bootstrap Styles-->
    <link href="/assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="/assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="/assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="/assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="/assets/js/Lightweight-Chart/cssCharts.css">
</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle waves-effect waves-dark" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand waves-effect waves-dark" href="index.html"><i class="large material-icons">insert_chart</i>
                <strong>CGB2012</strong></a>

            <div id="sideNav" href=""><i class="material-icons dp48">toc</i></div>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <li><a class="dropdown-button waves-effect waves-dark" href="#!" data-activates="dropdown4"><i class="fa fa-envelope fa-fw"></i> <i class="material-icons right">arrow_drop_down</i></a></li>

            <li><a class="dropdown-button waves-effect waves-dark" href="#!" data-activates="dropdown1"><i class="fa fa-user fa-fw"></i> <b>John Doe</b> <i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
    </nav>
    <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content">

        <li><a href="/CGB_login.html"><i class="fa fa-sign-out fa-fw"></i> 退出</a>
        </li>
    </ul>


    <ul id="dropdown4" class="dropdown-content dropdown-tasks w250">
        <li>
            <a href="#">
                <div>
                    <strong>John Doe</strong>
                    <span class="pull-right text-muted">
                                        <em>Today</em>
                                    </span>
                </div>
                <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
            </a>
        </li>
        <li class="divider"></li>

    </ul>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a class="waves-effect waves-dark" href="CGB_index.html"><i class="fa fa-dashboard"></i> 首页</a>
                </li>
                <li>
                    <a href="CGB_dept.html" class="waves-effect waves-dark"><i class="fa fa-desktop"></i> 部门管理</a>
                </li>
                <li>
                    <a href="CGB_menu.html" class="waves-effect waves-dark"><i class="fa fa-bar-chart-o"></i> 菜单管理</a>
                </li>
                <li>
                    <a href="CGB_roles.html" class="waves-effect waves-dark"><i class="fa fa-qrcode"></i> 角色管理</a>
                </li>

                <li>
                    <a href="CGB_user.html" class="waves-effect waves-dark"><i class="fa fa-table"></i> 用户管理</a>
                </li>
                <li>
                    <a href="CGB_logs.html" class="waves-effect waves-dark"><i class="fa fa-edit"></i> 日志管理 </a>
                </li>
                <li>
                    <a href="CGB_roles.html" class="active-menu waves-effect waves-dark"><i class="fa fa-qrcode"></i> 公告管理</a>
                </li>


                <li>
                    <a href="#" class="waves-effect waves-dark"><i class="fa fa-sitemap"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#">Second Level Link</a>
                        </li>
                        <li>
                            <a href="#">Second Level Link</a>
                        </li>
                        <li>
                            <a href="#">Second Level Link<span class="fa arrow"></span></a>
                            <ul class="nav nav-third-level">
                                <li>
                                    <a href="#">Third Level Link</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Link</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Link</a>
                                </li>

                            </ul>

                        </li>
                    </ul>
                </li>
                <li>
                    <a href="CGB_changePassword.html" class="waves-effect waves-dark"><i class="fa fa-fw fa-file"></i> 修改密码</a>
                </li>
            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->

    <div id="page-wrapper">
        <div class="header">
            <h1 class="page-header">
                公告管理
            </h1>
            <ol class="breadcrumb">
                <li><a href="#">notice</a></li>

            </ol>
        </div>

    </div>
    <div id="page-inner">

        <div class="row">
            <div class="col-md-12">
                <!-- Advanced Tables -->
                <div class="card" id="userApp">
                    <div v-show="listMenuDiv"><!-- 内容展示区 -->
                        <div class="card-action" >
                            公告信息管理表
                        </div>
                        <div class="card-content">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                    <tr>

                                        <th class="center">序号</th>
                                        <th class="center">标题</th>
                                        <th class="center">内容</th>
                                        <th class="center">状态</th>
                                        <th class="center">创建时间</th>
                                        <th class="center">创建者</th>
                                        <th class="center">操作</th>


                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(n,i) in getList1" :key="i">
                                        <td class="center">{{i+1}}</td>
                                        <td class="center">{{n.title}}</td>
                                        <td class="center">{{n.content}}</td>
                                        <td class="center">{{n.status}}</td>
                                        <td class="center">{{n.createdTime}}</td>
                                        <td class="center">{{n.createdUser}}</td>
                                        <td class="center">
                                            <button @click="doFindById(n.id)">修改</button>
                                            <button @click="doDeleteById(n.id)">删除</button>
                                        </td>

                                    </tr>
                                    </tbody>
                                </table>

                                <div >
                                    <button type="button" class="pre " @click="doJumpToPage" >上一页</button>
                                    <button>{{pageCurrent}}/{{pageCount}}</button>
                                    <button type="button" class="next" @click="doJumpToPage">下一页</button>
                                    <form style="display: inline;">
                                        <input type="text" name="pageCurrent" id="pageNumId" />
                                        <input type="button" value="跳转" class="jump" @click="doJumpToPage" />
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>

                    <div v-show="editMenuDiv" >
                        <form>
                            <input type="hidden" id="id" v-model="id"/>
                            <div>
                                <label >标题: </label>
                                <input type="text" v-model="title" placeholder="title"/>
                            </div>
                            <div>
                                <label >内容: </label>
                                <input type="text" v-model="content" placeholder="content"/>
                            </div>
                            <div>
                                <label >状态: </label>
                                <input type="text" v-model="status" placeholder="status"/>
                            </div>
                            <div>
                                <label >创建时间: </label>
                                <input type="text" v-model="createdTime" placeholder="createdTime"/>
                            </div>
                            <div>
                                <label >创建者: </label>
                                <input type="text" v-model="createdUser" placeholder="createdUser"/>
                            </div>


                            <button type="button" class="btn btn-default submit" @click="doSaveOrUpdate">提交</button>
                            <button type="button" class="btn btn-default cancel" @click="doCancel">取消</button>

                        </form>
                    </div>

                </div>




                <!--/.row-->





                <!-- /. ROW  -->



            </div>
        </div>
        <!-- /. ROW  -->
        <div class="fixed-action-btn horizontal click-to-toggle">
            <a class="btn-floating btn-large red">
                <i class="material-icons">menu</i>
            </a>
            <ul>
                <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
                <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
                <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
                <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
            </ul>
        </div>


    </div>
    <!-- /. PAGE INNER  -->
</div>
<!-- /. PAGE WRAPPER  -->
</div>

<!--    <script src="assets/js/jquery-1.10.2.js"></script>-->
<!--    <script src="assets/js/bootstrap.min.js"></script>-->
<!--	<script src="assets/materialize/js/materialize.min.js"></script>-->
<!--    <script src="assets/js/jquery.metisMenu.js"></script>-->
<!--    <script src="assets/js/morris/raphael-2.1.0.min.js"></script>-->
<!--    <script src="assets/js/morris/morris.js"></script>-->
<!--	<script src="assets/js/easypiechart.js"></script>-->
<!--	<script src="assets/js/easypiechart-data.js"></script>-->
<!--	 <script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>-->
<!--    <script src="assets/js/custom-scripts.js"></script>-->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#userApp",
        data:{

            getList1:[],
            id:"",
            title:"",
            content:"",
            telephone:"",
            status:"",
            createdUser:"",
            createdTime:"",
            pageCurrent:1,
            pageCount:0,
            listMenuDiv:true,
            editMenuDiv:false
        },
        methods:{
            doShowOrHide(){
                this.listMenuDiv=false;
                this.editMenuDiv=true;
            },
            doCancel(){
                this.listMenuDiv=true;
                this.editMenuDiv=false;
            },
            doFindById(){
                let url=``;
                axios.get(url)
                    .then(function(response){
                        let jsonResult=response.data;
                        if(jsonResult.state==1){
                            this.id=jsonResult.data.id;
                            this.title=jsonResult.data.title;
                            this.content=jsonResult.data.content;
                            this.status=jsonResult.data.status;
                            this.createdTime=jsonResult.data.createdTime;
                            this.createdUser=jsonResult.data.createdUser;
                            this.doGetNotice();
                        }else{
                            alert(jsonResult.message);
                        }
                    })
            },
            doDeleteById(id){
                let url=``;
                axios.delete(url)
                    .then(function(response){
                        let jsonResult=response.data;
                        if(jsonResult.state==1){
                            alert(jsonResult.message);
                            let rows=document.querySelectorAll("table>tbody>tr").length;
                            if(this.pageCurrent>1 && this.pageCurrent==this.pageCount && rows==1){
                                this.pageCurrent--;
                            }
                            this.doGetDept();
                        }else{
                            alert(jsonResult.message);
                        }
                    })
            },

            doSaveOrUpdate(){
                let url="";
                let params={
                    "id":this.id,
                    "title":this.title,
                    "content":this.content,
                    "status":this.status,
                    "createdTime":this.createdTime,
                    "createdUser":this.createdUser,
                };
                axios({
                    method:this.id?"put":"post",
                    url: url,
                    data: params
                }).then(function(response){
                    let jsonResult=response.data;
                    if(jsonResult.state==1){
                        alert("save ok");
                        this,doGetNotice();
                        this.resetForm();
                        this.doCancel()
                    }else{
                        alert(jsonResult.message);
                    }
                })
            },
            resetForm(){
                this.id="",
                    this.menuId=""
            },
            doJumpToPage(event){
                let cls=event.target.getAttribute("class");
                if(cls=="pre"&&this.pageCount>1){
                    this.pageCurrent--;
                }else if(cls=="next"&&this.pageCurrent<this.pageCount){
                    this.pageCount++;
                }else if(cls=="jump"){
                    let input=document.querySelector("#pageNumId");
                    let pageNum=input.value;
                    if(pageNum<1 || pageNum>this.pageCount){
                        alert("页码值不合法");
                        return;
                    }
                    this.pageCurrent=pageNum;
                }else{
                    return
                }
                this.doGetNotice();
            },
            doGetNotice(){
                let url=``;
                axios.get(url)
                    .then(function(response){
                        let jsonResult=response.data;
                        this.vm.getList1=jsonResult.data.list;
                        this.vm.pageCurrent=jsonResult.data.pageNum;
                        this.vm.pageCount=jsonResult.data.pages;
                    })
            }

        },
        mounted() {
            this.doGetNotice();
        }
    })
</script>

</body>

</html>